<template>
  <div class="app-container">
    <div class="flex cursor">
      <div class="flex cursor">
        <div class="custom-title margin-right-lg ">节假日减免费量统计表</div>
      </div>
    </div>
    <div class="flex">
      <div class="custom-tag margin-bottom">
        <el-radio-group v-model="radioCon" size="large">
          <el-radio-button :label="item.label" :value="item.value" v-for="(item,index) in holiday_type" :key="index" @click="bindRadio(item.value)" />
        </el-radio-group>
      </div>

    </div>

    <div class="flex">
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
        <el-form-item label="年份" prop="year">
          <el-date-picker v-model="queryParams.year" type="year" placeholder="请选择年份" @change="bindChangeYear"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="Plus" @click="handleAddDay()"  v-hasPermi="['system:statement:issue']">下发</el-button>
        </el-col>

        <el-col :span="1.5">
          <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:statement:export']">导出</el-button>
        </el-col>
      </el-row>

    </div>

    <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center '}" show-overflow-tooltip>
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="deptName" label="收费站" width="180" />
      <el-table-column :label="item" width="180" v-for="item in holidayList" :key="item">
        <el-table-column label="减免通行费">
          <template #default="scope">
            <div>{{scope.row[item]&&scope.row[item].fee?scope.row[item].fee:'-'}}</div>
          </template>
        </el-table-column>
        <el-table-column label="减免通行量">
          <template #default="scope">
            <div>{{scope.row[item]&&scope.row[item].num?scope.row[item].num:'-'}}</div>
          </template>
        </el-table-column>

      </el-table-column>
      <el-table-column label="合计" width="180">
        <el-table-column label="减免通行费" prop="total.fee" />
        <el-table-column label="减免通行量" prop="total.num" />
      </el-table-column>

    </el-table>
    <el-dialog title="任务下发" v-model="dialogTask" width="522px" append-to-body>
      <el-form ref="activityRefTask" :model="taskForm" :rules="rules" label-width="60px">
        <el-form-item label="年度" prop="year">
          <el-date-picker style="width: 100%;" v-model="taskForm.year" type="year" @change="bindChangeTaskDate" />
        </el-form-item>
        <el-form-item label="日期" prop="dateSection" class="margin-bottom">
          <el-date-picker style="width: 100%;" v-model="taskForm.dateSection" type="daterange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" @change="bindChangeAllDate" />
        </el-form-item>
        <div class="flex gap-2 mt-4 wrap" v-if="holidayList.length">
          <div v-for="(item,index) in holidayList" :key="index"> <el-tag size="large">{{item}}</el-tag></div>
        </div>
        <div class="text-red" v-if="holidayList.length"> *共免费{{holidayList.length}}天</div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFormTask">确认并下发工单</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
  
  <script setup>
import moment from 'moment'
import { getHolidayStatistics, getHolidayDate, submitIssue, getStatementDate } from "@/api/charge/ticket";
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()
const route = useRoute();
const { proxy } = getCurrentInstance()
const { holiday_type } = proxy.useDict('holiday_type');
const queryParams = ref({ year: moment().format('YYYY'), holidayType: '1' })
const tableData = ref()
const radioCon = ref('春节')
const tag = ref(1)
const deptId = ref()
const holidayList = ref([])
const taskForm = ref({ year: moment().format('YYYY'), deptId: deptId.value })
const dateSection = ref([])
const dialogTask = ref(false)


const getList = () => {
  holidayList.value = [];
  getHolidayStatistics(queryParams.value).then(res => {
    if (res.code == 200) {
      tableData.value = res.data;
      for (let key in res.data[0]) {
        if (key != 'total'&&key != 'deptName')
          holidayList.value.push(key);
      }
    }

  })
}
// const handleAddDayList = () => {
//   getHolidayDate(queryParams.value).then(res => {
//     if (res.code == 200) {
//       holidayList.value = res.data;
//     }
//   })
// }

const bindRadio = (val) => {
  queryParams.value.holidayType = val;
  getList()
}
const handleAddDay = () => {
  getHolidayDate({ year: taskForm.value.year, holidayType: queryParams.value.holidayType }).then(res => {
    if (res.code == 200) {
      dialogTask.value = true;
      taskForm.value.dateSection = [res.data[0], res.data[res.data.length - 1]]
      holidayList.value = res.data;
    }
  })
}
const bindChangeAllDate = (val) => {
  taskForm.value.dateSection = [moment(val[0]).format("YYYY-MM-DD"), moment(val[1]).format("YYYY-MM-DD")]

  getDate(taskForm.value.dateSection[0], taskForm.value.dateSection[1])
}
const bindChangeTaskDate = (val) => {
  taskForm.value.year = moment(val).format("YYYY");
  handleAddDay()
}
const submitFormTask = () => {
  proxy.$refs["activityRefTask"].validate(valid => {
    if (valid) {
      taskForm.value.holidayType = queryParams.value.holidayType;
      taskForm.value.holiday = holidayList.value;
      submitIssue(taskForm.value).then(response => {
        proxy.$modal.msgSuccess("提交成功");
        dialogTask.value = false;
        getList();
      });
    }
  });
}
const getDate = (startDate, endDate) => {
  getStatementDate({ startDate, endDate }).then(res => {
    if (res.code == 200) {
      holidayList.value = res.data
    }
  })
}

const cancel = () => {
  dialogTask.value = false;
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download("/statement/export", {
    ...queryParams.value,
  }, `节假日统计_${new Date().getTime()}.xlsx`);
};
const getDeptId = () => {
  userStore.getInfo().then(res => {
    if (res.code == 200) {
      deptId.value = res.user.dept.deptId;
      queryParams.value.deptId = deptId.value;
      taskForm.value.deptId = deptId.value;
      getList()
    }
  })
}
const bindChangeYear = (val) => {
  queryParams.value.year = moment(val).format('YYYY');

}
function handleQuery() {
  getList();
}
getDeptId()
// handleAddDayList()
  </script>
  
  <style scoped>
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex .label {
  color: #333;
  font-size: 14px;
}
/deep/.padding .el-radio-button--large .el-radio-button__inner {
  padding: 8px 19px;
}
/deep/ .custom-tag .el-radio-button--large .el-radio-button__inner {
  min-width: 60px;
  height: 32px;
  line-height: 32px;
  margin: 0 4px 0;
  padding: 0 10px;
  border: 1px solid #e4e4e4;
  font-size: 14px;
}
/deep/ .custom-tag .el-radio-button--large.is-active .el-radio-button__inner {
  background: #fff;
  border: 1px solid #246bcc;
  color: #246bcc;
  position: relative;
}

/deep/
  .custom-tag
  .el-radio-button--large.is-active
  .el-radio-button__inner:after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  border-top: 20px solid #246bcc;
  border-left: 20px solid transparent;
}
/deep/
  .custom-tag
  .el-radio-button--large.is-active
  .el-radio-button__inner:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 6px;
  background: transparent;
  top: 2px;
  right: 4px;
  border: 1px solid white;
  border-top: none;
  border-right: none;
  transform: rotate(-55deg);
  z-index: 9;
}
.margin-bottom {
  margin-bottom: 10px;
}
.text-red {
  color: red;
}

.scroll {
  height: 800px;
  overflow-y: scroll;
}
.align-center {
  display: flex;
  align-items: center;
}

.wrap {
  flex-wrap: wrap;
  margin: 10px;
}
.wrap > div {
  margin: 10px;
}
.margin-bottom {
  margin-bottom: 20px;
}
</style>